<%--
  Created by IntelliJ IDEA.
  User: 14815
  Date: 2022/8/7
  Time: 11:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%--获取servlet context 根路径--%>
<%pageContext.setAttribute("APP_PATH", request.getContextPath());%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="XOJ  Online Judge">
    <meta name="keywords" content="XOJ">
    <title>XOJ</title>

    <!-- 引入css样式文件 按照这样的顺序，生效的顺序是谁在下谁生效，避免盒子颜色出现覆盖错误-->
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          crossorigin="anonymous">

    <!-- 显示ico -->
    <link rel="shorcut icon" href="${APP_PATH}/static/images/logo.ico" type="image/x-ixon">
    <%--引入jquery--%>
    <script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.6.0.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            crossorigin="anonymous"></script>

    <script text="text/javascript">
        $(function () {

            // 分页数据信息
            var page = ''

            const token = window.localStorage.getItem("token")
            // console.log('token:' + token)

            // 当前打开评论对应的题目id
            var currentProblemId = ''

            /*
                1. 当localStorage中有token值的时候，证明用户已经登录，此时需要显示的是具体用户头像和退出按钮,不显示登录 hidden
                2. 当localStorage中没有token值的时候，证明用户还没有登录，此时需要显示登录按钮，显示默认的用户头像，不显示退出
            */
            if (token !== null) {

                // 如果token不为空，则需要获取用户头像地址赋值给img的src属性进行展示
                // 获取用户头像
                var path = ''
                // 如果能从数据库获取到用户头像，则将路径展示给变量path，不能则使用默认值
                $.ajax({
                    url: '${APP_PATH}/user/getUserInfoByToken',
                    type: 'GET',
                    data: {
                        "token": token,
                    },
                    beforeSend: function (XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader("X-Auth0-Token", token);
                    },
                    success: function (res) {
                        // console.log(res)
                        if (res.code === 100) {
                            path = res.extend.userInfo.avatar
                            // console.log(path)
                            if (path == 0) {
                                $("#userImg").attr("src", "${APP_PATH}/static/images/defaultUserAvatar.jpg")
                            } else {
                                $("#userImg").attr("src", "${APP_PATH}/static/userImg/" + path)
                            }
                        } else {
                            alert(res.extend.error)
                        }
                    }
                })

                $("#userImg").attr("src", "${APP_PATH}/static/images/user.jpg")
                $("#loginBtn").css('visibility', 'hidden')
            } else {
                $("#userImg").attr("src", "${APP_PATH}/static/images/defaultUserAvatar.jpg")
                $('#logoutBtn').css('visibility', 'hidden')
            }

            // 页面加载完成时，需要发送请求去后台获取题目数据 默认是首页数据
            ajaxSplitPages(1, token)

            // 点击跳转到首页时执行的js函数
            $("#firstPage").click(function () {
                ajaxSplitPages(1, token)
            })

            // 下一页执行的js函数
            $("#nextPage").click(function () {
                // console.log(prePageNumberInfo)
                ajaxSplitPages(prePageNumberInfo.pageNum + 1, token)
            })

            // 当前页执行的js函数
            $("#currentPage").click(function () {

                var pages = $("#currentPage").text()
                // console.log("currentpages", pages)

                ajaxSplitPages(pages, token)
            })

            // 上一页执行的js函数
            $("#previousPage").click(function () {
                ajaxSplitPages(prePageNumberInfo.pageNum - 1, token)
                window.location.reload()
            })

            // 尾页执行的js函数
            $("#finallyPage").click(function () {
                ajaxSplitPages(prePageNumberInfo.pages, token)
            })


            // 用户点击登录按钮，跳转到登录页面
            $("#loginBtn").click(function () {
                window.location.href = "${APP_PATH}/templates/user/login.jsp"
            })

            // 用户点击退出按钮时，发送ajax请求，携带token返回给后端服务器，并清空浏览器的localStorage中token
            $("#logoutBtn").click(function () {
                $.ajax({
                    url: "${APP_PATH}/user/logout",
                    type: "POST",
                    dataType: "json",
                    data: {
                        "token": token
                    },
                    success: function (data) {
                        // console.log("token:" + token)
                        // console.log(data)
                        if (data.code === 100) {
                            // 退出成功之后，跳转到首页
                            window.localStorage.removeItem("token")
                            window.location.href = "${APP_PATH}/templates/sys/questionBank/index.jsp";
                        } else {
                            alert("退出失败，请检查网络设置！")
                        }
                    }
                })
            })

            $("#toUserInfo").click(function () {
                if (token !== null) {
                    window.location.href = "${APP_PATH}/templates/user/userinfo.jsp"
                } else {
                    alert("登录之后才能查看个人信息，请登录！")
                }
            })

            // 点击讨论打开对用题目的讨论模态框，显示讨论内容
            // 点击当前页面的第一个题目的评论区a连接
            $("#problemTbody").on('click', "tr:nth-child(1) td:nth-child(3) a", function () {
                // 禁止a标签的跳转行为
                event.preventDefault();
                // 先获取a标签中的评论数量
                var discussNum = $("#problemTbody tr:nth-child(1) td:nth-child(3) a").text()
                // 再获取此条超链接对应的题目id信息
                currentProblemId = $("#problemTbody tr:nth-child(1) td:nth-child(3) a").attr("href")
                // console.log(discussNum, currentProblemId)
                showComments(discussNum, currentProblemId, token);
            })
            // 点击当前页面的第二个题目的评论区a连接
            $("#problemTbody").on('click', "tr:nth-child(2) td:nth-child(3) a", function () {
                event.preventDefault();
                var discussNum = $("#problemTbody tr:nth-child(2) td:nth-child(3) a").text()
                currentProblemId = $("#problemTbody tr:nth-child(2) td:nth-child(3) a").attr("href")
                showComments(discussNum, currentProblemId, token);
            })
            $("#problemTbody").on('click', "tr:nth-child(3) td:nth-child(3) a", function () {
                event.preventDefault();
                var discussNum = $("#problemTbody tr:nth-child(3) td:nth-child(3) a").text()
                currentProblemId = $("#problemTbody tr:nth-child(3) td:nth-child(3) a").attr("href")
                // console.log(discussNum, problemId)
                showComments(discussNum, currentProblemId, token);
            })
            $("#problemTbody").on('click', "tr:nth-child(4) td:nth-child(3) a", function () {
                event.preventDefault();
                var discussNum = $("#problemTbody tr:nth-child(4) td:nth-child(3) a").text()
                currentProblemId = $("#problemTbody tr:nth-child(4) td:nth-child(3) a").attr("href")
                showComments(discussNum, currentProblemId, token);
            })
            $("#problemTbody").on('click', "tr:nth-child(5) td:nth-child(3) a", function () {
                event.preventDefault();
                var discussNum = $("#problemTbody tr:nth-child(5) td:nth-child(3) a").text()
                currentProblemId = $("#problemTbody tr:nth-child(5) td:nth-child(3) a").attr("href")
                showComments(discussNum, currentProblemId, token);
            })

            // 用户提交评论内容
            $("#postCommentsBtn").on('click', function () {

                if (token == null) {
                    alert("登录之后才能发布评论~")
                } else {
                    // 打开输入评论内容的模态框
                    $("#comment").modal("show")
                    // 隐藏之前显示出来的模态框
                    $("#staticBackdrop").modal("hide")
                }
            })

            $("#postCommentsBtn2").on('click', function () {
                if (token == null) {
                    alert("登录之后才能发布评论~")
                } else {
                    // 打开输入评论内容的模态框
                    $("#comment").modal("show")
                    // 隐藏之前显示出来的模态框
                    $("#postComments").modal("hide")
                }
            })

            // 用户点击发布按钮之后，发送ajax请求，将评论数据保存到数据库中，
            /*
            数据：currentProblemId, uuId==token, content,
             */
            $("#release").on('click', function () {
                var content = $(".inputComments").val()
                // console.log(currentProblemId)
                // console.log( content)

                $.ajax({
                    url : "${APP_PATH}/discuss/release",
                    type : "POST",
                    data : {
                        "pid" : currentProblemId,
                        "token" : token,
                        "content" : content
                    },
                    // 发送token
                    // 自定义请求头参数，返回token值
                    beforeSend: function (XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader("X-Auth0-Token", token);
                    },
                    success : function (res) {
                        if (res.code === 100) {
                            // 数据库保存数据成功，刷新当前评论展示模态框并展示
                            alert("发布成功！")
                            // 关闭发布的模态框 并且清空评论内容
                            $(".inputComments").val('')
                            $("#comment").modal("hide")
                            getCommentsAndShow(currentProblemId, token)
                            // 刷新首页table表格中的信息
                            ajaxSplitPages(1, token)
                        } else {
                            alert("评论发布失败，请稍后再试！")
                        }
                    }
                })
            })


        })

        /**
         *  如果为0，则展示的是  “评论空空如也，快来发表评论吧！
         *  如果不为0，展示评论信息，需要获得当前的题目id，带着pid去评论表中查询数据，用jquery组装展示内容
         * @param discussNum
         * @param pid
         * @param token
         */
        function showComments(discussNum, pid, token) {
            // if (token == null) {
            //     alert("请先登录！！！")
            // }

            // 显示题目信息 序号和题目
            $.ajax({
                url : "${APP_PATH}/problem/getProblemByProblemId",
                data: {
                    "id" : pid,
                },
                type: "GET",
                success : function (res) {
                    // console.log(res)
                    // 组装显示信息
                    $("#problemTitle").html(
                        res.extend.problem.id + "." + res.extend.problem.title
                    )
                    $("#ModalProblemTitle").html(
                        res.extend.problem.id + "." + res.extend.problem.title
                    )
                }
            })

            if (parseInt(discussNum) == 0) {
                // 打开发表评论的模态框
                $("#postComments").modal("show")
            } else {
                // 发送ajax请求 获取题目对应的评论信息 和用户的个性签名信息
                getCommentsAndShow(pid, token)
            }
        }

        /**
         * 展示评论
         */
        function getCommentsAndShow(pid, token) {
            // console.log("pid: ", pid)
            $.ajax({
                url : "${APP_PATH}/discuss/getDiscussInfoByPId",
                type: "GET",
                data: {
                    "pid" : pid,
                },
                // 发送token
                // 自定义请求头参数，返回token值
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("X-Auth0-Token", token);
                },
                success : function (res) {
                    if (res.code === 100) {
                        // console.log(res)
                        var tbody = $("#discussContent-table")
                        var discussionInfo = res.extend.disList
                        // console.log("当前登录用户token: ", token)
                        // console.log(discussionInfo)
                        // 组装显示评论信息
                        var data = ''

                        // 关闭 完成之后打开
                        // $("#staticBackdrop").modal("hide")
                        for (var i = 0; i < discussionInfo.length;i ++) {

                            // 展示之前查询登录用户和评论点赞之间的对应关系
                            // 显示点赞的图片，已点赞，蓝色
                            // 未点赞 白色

                            $.ajax({
                                url:"${APP_PATH}/discuss/checkLikesStatus",
                                type:"GET",
                                data: {
                                    "did":discussionInfo[i].id,
                                    "token":token
                                },
                                // ajax的回调函数和外面是异步的，所以导致获取不到全局变量的值
                                // 将执行的代码放到回调函数中执行或者加入async:false （同步执行）
                                async : false,
                                // 自定义请求头参数，返回token值
                                beforeSend: function (XMLHttpRequest) {
                                    XMLHttpRequest.setRequestHeader("X-Auth0-Token", token);
                                },
                                success:function (res) {
                                    var likesImgWithCurUser = 'like'

                                    var curpid = pid
                                    // console.log(curpid)

                                    var curdid = discussionInfo[i].id

                                    if (res.code === 100) {
                                        likesImgWithCurUser = 'likesCurrent'
                                    }
                                    // console.log("回调函数中的点赞图片：", likesImgWithCurUser)

                                    var html = "<div>" +
                                        "<a style='text-decoration: none;font-size: 19px;color: #333;margin-top: 24px;margin-left: 90px;'>"+discussionInfo[i].username+"</a>" +
                                        "<img style='margin-top: 20px;margin-left: -110px;width: 50px;height: 50px;border-radius: 50%;' src='${APP_PATH}/static/userImg/"+discussionInfo[i].avatar+"' alt=''>" +
                                        "<p style='margin-top: -20px;margin-left: 90px;font-size: 14px;color: #999;'>"+discussionInfo[i].signature+"</p>" +
                                        "<a href='javascript:void(0);&"+curdid+"&"+token+"&"+curpid+"' onclick='like(this)' value='''><img style='margin-top: -40px;margin-left: 469px;width: 25px;height: 25px;' src='${APP_PATH}/static/images/"+likesImgWithCurUser+".png'></a>" +
                                        "<p style='margin-top: -35px;margin-left: 505px;'>"+discussionInfo[i].likeNum+"</p>" +
                                        "<a style='background-color: rgb(255,255,255);border: none;font-size: 18px;margin-top: -35px;margin-left: 569px;color: skyblue;text-decoration: none;display: block;' href='javascript:void(0);+"+curdid+"+"+token+"+"+pid+"' onclick='delDiscussion(this)'>删除</a>" +
                                        "<p style='border: 1px solid rgb(128,128,128);border-radius: 10px;width: 700px;height: 61px;margin-top: 18px;margin-left: 76px;padding-top: 8px;padding-left: 15px;'>"+discussionInfo[i].content+"</p>" +
                                        "</div>"

                                    data += html
                                }
                            })
                        }
                        tbody.html(data)
                        // 打开显示评论的模态框
                        $("#staticBackdrop").modal("show")
                    } else {
                        alert("获取数据失败！")
                    }
                }
            })
        }

        /**
         * 分页查询函数
         * @param pageNum
         * @param token
         */
        function ajaxSplitPages(pageNum, token) {

            // 打印参数
            // console.log(pageNum)

            // 刷新table表格 ajax可以动态刷新table数据 如下所示
            // $("#problemTbody").load("http://localhost:8080/templates/sys/questionBank/index.jsp #problemTbody")

            $.ajax({
                url: "${APP_PATH}/problem/getProblemInfo",
                type: "GET",
                data: {
                    "pageNums": pageNum
                },
                success: function (res) {
                    // console.log(res)
                    if (res.code === 100) {
                        prePageNumberInfo = res.extend.prePageNumberInfo;
                        // console.log("page对象", page)
                        // console.log(res.extend.prePageNumberInfo)
                        // 组装数据
                        var data = ''
                        for (var i = 0; i < prePageNumberInfo.length; i++) {

                            // 用户未登录时，题目状态全部为
                            var status = "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-brush' viewBox='0 0 16 16'> <path d='M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.067 6.067 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.118 8.118 0 0 1-3.078.132 3.659 3.659 0 0 1-.562-.135 1.382 1.382 0 0 1-.466-.247.714.714 0 0 1-.204-.288.622.622 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896.126.007.243.025.348.048.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04zM4.705 11.912a1.23 1.23 0 0 0-.419-.1c-.246-.013-.573.05-.879.479-.197.275-.355.532-.5.777l-.105.177c-.106.181-.213.362-.32.528a3.39 3.39 0 0 1-.76.861c.69.112 1.736.111 2.657-.12.559-.139.843-.569.993-1.06a3.122 3.122 0 0 0 .126-.75l-.793-.792zm1.44.026c.12-.04.277-.1.458-.183a5.068 5.068 0 0 0 1.535-1.1c1.9-1.996 4.412-5.57 6.052-8.631-2.59 1.927-5.566 4.66-7.302 6.792-.442.543-.795 1.243-1.042 1.826-.121.288-.214.54-.275.72v.001l.575.575zm-4.973 3.04.007-.005a.031.031 0 0 1-.007.004zm3.582-3.043.002.001h-.002z'/></svg>"

                            if (token != null) {
                                status = "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-brush-fill' viewBox='0 0 16 16'> <path d='M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.067 6.067 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.118 8.118 0 0 1-3.078.132 3.659 3.659 0 0 1-.562-.135 1.382 1.382 0 0 1-.466-.247.714.714 0 0 1-.204-.288.622.622 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896.126.007.243.025.348.048.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04z'/> </svg>"
                            }

                            var alink = "<a id='problemTitleA' style='border-bottom: 0;color: black;font-weight: 700;text-decoration:none;' href='${APP_PATH}/templates/sys/detail/index.jsp?problemId=" + prePageNumberInfo[i].id + "'>" + prePageNumberInfo[i].id + "." + prePageNumberInfo[i].title + "</a>"
                            var discussion = "<a id='problemDiscussA' style='border-bottom: 0;color: black;font-weight: 700;text-decoration:none' data-bs-toggle='modal' data-bs-target='#staticBackdrop' href='"+prePageNumberInfo[i].id+"'>" + prePageNumberInfo[i].discussNum + "</a>"
                            var pass = "78%"
                            var difficulty = prePageNumberInfo[i].difficulty === 1 ? "中等" : prePageNumberInfo[i].difficulty === 0 ? "简单" : "困难"

                            var content = "<tr><th scope='row'>" + status + "</th><td>" + alink + "</td><td>" + discussion + "</td><td>" + pass + "</td><td>" + difficulty + "</td></tr>"

                            // $("#problemTbody").append(content)

                            data += content

                        }
                        // console.log(data)

                        // 添加hover动态效果
                        /*$("#problemTbody").on('mouseover', "#problemTitleA", function () {
                            // alert("鼠标进入了题目标题部分")
                            $("#problemTitleA").css("color", "blue")
                        })
                        $("#problemTbody").on('mouseout', "#problemTitleA", function () {
                            // alert("鼠标移出了题目标题部分")
                            $("#problemTitleA").css("color", "black")
                        })
                        $("#problemTbody").on('mouseover', "#problemDiscussA", function () {
                            // alert("鼠标进入了题目讨论标题部分")
                            $("#problemDiscussA").css("color", "blue")
                        })
                        $("#problemTbody").on('mouseout', "#problemDiscussA", function () {
                            // alert("鼠标移出了题目讨论标题部分")
                            $("#problemDiscussA").css("color", "black")
                        })*/

                        //动态刷新内容
                        $("#problemTbody").html(data)

                    } else {
                        alert("获取数据失败！！！")
                    }
                }
            })
        }

        /**
         * 用户点赞功能
         * 需求分析：
         *   当用户在进行点赞操作时，确保有正确的token，即用户需要登录
         *   用户登录之后，判断用户对于当前评论的点赞状态，
         *       如果已经点赞，点赞图片变红，再次点击取消点赞，点赞数减去 1
         *       如果用户未点赞，展示默认点赞图片，用户点击点赞之后，图片变红，点赞数加 1
         *       刷新点赞数和评论状态可以通过刷新当前模态框实现
         * 实现步骤：
         *   获取点赞图片元素
         *   在showComments函数中，判断用户对于当前评论的点赞状态，根据情况给img的src属性赋值
         *   点赞或取消点赞之后，发送ajax请求，刷新数据库内容
         *   之后重新调用showComments函数中的刷新模态框
         *
         * 点击一次为点赞
         * 点击两次为取消点赞
         *
         * @param did
         * @param token
         */
        function like(obj) {
            var did = obj.toString().split("&")[1]
            var token = obj.toString().split("&")[2]
            var pid = obj.toString().split("&")[3]

            // console.log(obj.toString().split("&"))
            // console.log(did, token, pid)
            $.ajax({
                url : '${APP_PATH}/discuss/like',
                type : "GET",
                data : {
                    "did" : did,
                    "token" : token
                },
                // 发送token
                // 自定义请求头参数，返回token值
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("X-Auth0-Token", token);
                },
                success : function (res) {
                    /*
                    后端返回100，证明存在关系 已点赞 ---> 取消点赞
                    后端返回200，证明不存在关系 未点赞 ---> 点赞
                     */
                    if (res.code === 100) {
                        if (res.extend.data === 1000) {
                            // console.log("删除点赞成功！");
                            getCommentsAndShow(pid, token)
                        } else {
                            // console.log("增加点赞成功！");
                            // 刷新模态框
                            // $("#staticBackdrop").modal("hide")
                            getCommentsAndShow(pid, token)
                        }
                    } else {
                        alert("登录之后才能点赞哦~")
                    }
                }
            })
        }

        /**
         * 删除评论功能
         * @param obj
         */
        function delDiscussion(obj) {

            console.log(obj.toString().split("+"))

            var did = obj.toString().split("+")[1]
            var token = obj.toString().split("+")[2]
            var pid = obj.toString().split("+")[3]

            if(token == null) {
                alert("登录之后才能删除评论哦~")
            } else {
                $.ajax({
                    url: '${APP_PATH}/discuss/del',
                    type: "GET",
                    data: {
                        "did": did,
                        "token": token
                    },
                    // 发送token
                    // 自定义请求头参数，返回token值
                    beforeSend: function (XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader("X-Auth0-Token", token);
                    },
                    success: function (res) {
                        if (res.code === 100) {
                            getCommentsAndShow(pid, token)
                        } else {
                            alert(res.extend.data)
                        }
                    }
                })
            }
        }

    </script>

</head>

<body>

<!-- 页面通用部分 导航栏和版权部分 -->
<div class="shortcut">
    <div class="logo wrapper">
        <h1>
            <a href="#">XOJ</a>
        </h1>
        <p>XOJ</p>
    </div>
    <!-- 导航栏 -->
    <div class="nav wrapper">
        <ul>
            <li>
                <a href="https://blog.csdn.net/qq_52397471?type=edu" target="_blank">学习</a>
                <a href="${APP_PATH}/templates/sys/questionBank/index.jsp">题库</a>
                <a href="${APP_PATH}/templates/sys/about/index.jsp">关于</a>
            </li>
        </ul>
    </div>
    <!-- 搜索框 -->
    <div class="search">
        <input type="text" placeholder="搜一搜">
        <!-- 放大镜定位效果 -->
        <span></span>
    </div>

    <div class="login">
        <button id="logoutBtn">
            退出
        </button>
        <button id="loginBtn">
            登录
        </button>
        <button>
            <a id="toUserInfo" href="javascript:void(0);">
                <img id="userImg" src="" alt="">
            </a>
        </button>
    </div>

</div>

<!-- 题库信息展示区域 -->
<div class="info wrapper">
    <table class="table _mytable">
        <thead>
        <tr>
            <th scope="col">状态</th>
            <th scope="col">题目</th>
            <th scope="col">讨论区</th>
            <th scope="col">通过率</th>
            <th scope="col">难度</th>
        </tr>
        </thead>
        <tbody id="problemTbody">
        <%--        <tr>--%>
        <%--            <th scope="row">--%>
        <%--                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-brush"--%>
        <%--                     viewBox="0 0 16 16">--%>
        <%--                    <path d="M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.067 6.067 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.118 8.118 0 0 1-3.078.132 3.659 3.659 0 0 1-.562-.135 1.382 1.382 0 0 1-.466-.247.714.714 0 0 1-.204-.288.622.622 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896.126.007.243.025.348.048.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04zM4.705 11.912a1.23 1.23 0 0 0-.419-.1c-.246-.013-.573.05-.879.479-.197.275-.355.532-.5.777l-.105.177c-.106.181-.213.362-.32.528a3.39 3.39 0 0 1-.76.861c.69.112 1.736.111 2.657-.12.559-.139.843-.569.993-1.06a3.122 3.122 0 0 0 .126-.75l-.793-.792zm1.44.026c.12-.04.277-.1.458-.183a5.068 5.068 0 0 0 1.535-1.1c1.9-1.996 4.412-5.57 6.052-8.631-2.59 1.927-5.566 4.66-7.302 6.792-.442.543-.795 1.243-1.042 1.826-.121.288-.214.54-.275.72v.001l.575.575zm-4.973 3.04.007-.005a.031.031 0 0 1-.007.004zm3.582-3.043.002.001h-.002z"/>--%>
        <%--                </svg>--%>
        <%--            </th>--%>
        <%--            <td>--%>
        <%--                <a href="${APP_PATH}/templates/sys/detail/index.jsp">--%>
        <%--                    1.两数之和--%>
        <%--                </a>--%>
        <%--            </td>--%>
        <%--            <td>--%>
        <%--                <a id="openDiscussionModel" data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#">--%>
        <%--                    1--%>
        <%--                </a>--%>
        <%--            </td>--%>
        <%--            <td>78%</td>--%>
        <%--            <td>简单</td>--%>
        <%--        </tr>--%>
        <%--        <tr>--%>
        <%--            <th scope="row">--%>
        <%--                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"--%>
        <%--                     class="bi bi-brush-fill" viewBox="0 0 16 16">--%>
        <%--                    <path d="M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.067 6.067 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.118 8.118 0 0 1-3.078.132 3.659 3.659 0 0 1-.562-.135 1.382 1.382 0 0 1-.466-.247.714.714 0 0 1-.204-.288.622.622 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896.126.007.243.025.348.048.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04z"/>--%>
        <%--                </svg>--%>
        <%--            </th>--%>
        <%--            <td>--%>
        <%--                <a href="#">--%>
        <%--                    1.两数之和--%>
        <%--                </a>--%>
        <%--            </td>--%>
        <%--            <td>--%>
        <%--                <a href="#">--%>
        <%--                    1--%>
        <%--                </a>--%>
        <%--            </td>--%>
        <%--            <td>78%</td>--%>
        <%--            <td>简单</td>--%>
        <%--        </tr>--%>
        </tbody>
    </table>

    <%--分页区域--%>
    <%--分页的文字信息--%>
    <div class="col-md-offset-5" id="mydiv">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <%--<h4>${prePageNumberInfo}</h4>--%>
                <li>
                    <a href="#" id="firstPage">首页</a>
                </li>
                <c:if test="${prePageNumberInfo.hasPreviousPage}">

                    <li>
                        <a id="previousPage" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                </c:if>

                <c:forEach items="${prePageNumberInfo.navigatepageNums}" var="page_Num">
                    <c:if test="${page_Num == prePageNumberInfo.pageNum}">
                        <li class="active"><a href="#">${page_Num}</a></li>
                    </c:if>
                    <c:if test="${page_Num != prePageNumberInfo.pageNum}">
                        <li><a id="currentPage" href="#">${page_Num}</a></li>
                    </c:if>
                </c:forEach>

                <c:if test="${prePageNumberInfo.hasNextPage}">
                    <li>
                        <a id="nextPage" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </c:if>

                <li>
                    <a id="finallyPage" href="#">尾页</a>
                </li>
            </ul>
        </nav>
    </div>

</div>

<!-- 版权区域 -->
<div class="footer">
    <div class="bottom wrapper">
        <ul>
            <li>
                <a href="${APP_PATH}/templates/sys/copyright/aboutUs.jsp">关于我们</a>
                <a href="${APP_PATH}/templates/sys/copyright/projectDescription.jsp">项目简介</a>
                <a href="${APP_PATH}/templates/sys/copyright/termsOfUse.jsp">使用条例</a>
                <a href="${APP_PATH}/templates/sys/copyright/cooperativeDevelopment.jsp">合作开发</a>
                <a href="${APP_PATH}/templates/sys/copyright/link.jsp">友情链接</a>
            </li>
        </ul>
        <p>CpoyRight@X O J</p>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ModalProblemTitle" id="staticBackdropLabel"></h5>
                <%--                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>--%>
            </div>
            <div class="modal-body">
                <div class="discuss-table">
                    <table id="discussContent-table">
                        <%--<tr>
                            <div>
                                <a id="discussUsername" href="#">yuluo</a>
                                <img id="discussUserAvatar" src="../../../static/images/user.jpg" alt="">
                                <p id="discussUserSignature">世界上只有10种人，一种懂二进制，一种不懂。</p>

                                <img id="likesImg" src="../../../static/images/like.png" alt="">
                                <p id="likes">1</p>
                                &lt;%&ndash;<div id="noLikeDiscuss">
                                        <img src="../../../static/images/nolike.png" alt="">
                                        <p id="noLikes">1</p>
                                    </div>&ndash;%&gt;
                                <p id="discussContent">测试评论内容</p>
                            </div>
                        </tr>--%>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <%--<button type="button" data-bs-dismiss="modal" aria-label="Close" class="btn btn-secondary">关闭</button>--%>
                    <button type="button" data-bs-target="#comment" data-bs-toggle="modal" id="postCommentsBtn" class="btn btn-primary">发表评论</button>
            </div>
        </div>
    </div>
</div>

<%--没有评论时，需要发表评论的模态框--%>
<div class="modal fade" id="postComments" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="problemTitle" class="modal-title"></h5>
            </div>
            <div class="modal-body">
                <div id="tips">
                    <span style="text-align:center;color: black;font-family:'宋体';font-size: 18px">
                        这里空空如也，赶快发表评论吧~~~
                    </span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-bs-target="#comment" data-bs-toggle="modal" id="postCommentsBtn2" class="btn btn-primary">发表评论</button>
            </div>
        </div>
    </div>
</div>


<%--发表评论的模态框--%>
<div class="modal fade" id="comment" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalToggleLabel2">发表评论</h5>
            </div>
            <div class="modal-body">
               <input type="text" class="inputComments" placeholder="输入你的评论吧~" value="">
            </div>
            <div class="modal-footer">
                <%--提交评论内容--%>
                <button id="release" class="btn btn-success">发布</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
